<template>
	<view class="body-view">
		<view class="flex top-menu-view">
			<block v-for="(menuTab, index) in menuTabs" :key="index">
				<view class="menu-one-view" v-bind:id="'tabNum' + index" @click="swichMenu(index)">
					<view :class="[currentTab == index ? 'menu-one-act' : 'menu-one']">
						<view class="menu-one-txt" style="font-size: 26upx;">{{ menuTab.name }}</view>
						<view class="menu-one-bottom">
							<view class="menu-one-bottom-color"></view>
						</view>
					</view>
				</view>
			</block>
		</view>


		<!-- </scroll-view> -->
		<swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
			<block v-for="(swiperDate, index1) in swiperDateList" :key="index1">
				<swiper-item>
					<scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(index1)">
						<block v-for="(item,index2) in orderList" :key="index2">
							<view class="swiper-box flex flex-direction align-center">
								<view class="swiper-list-entity">
									<view class="swiper-box-top">
										<text>订单号:</text>
										<text>9999999999999999999</text>
									</view>
									<view class="swiper-box-center flex align-center">
										<image class="swiper-box-img" src="../../static/img/login-img/login.png" mode=""></image>
										<view class="swiper-box-center-text">
											<view>
												香辣美味大龙虾
											</view>
											<view class="swiper-box-center-name">
												<view>收货人：黄诚意</view>
												<view>￥68x1</view>
											</view>
										</view>
									</view>
									<view class="swiper-box-bottom flex">
										<view class="bottom-left">
											<view>状态</view>
											<view class="bottom-left-pj">待评价</view>
										</view>
										<view class="bottom-center">
											<view>核销时间</view>
											<view style="margin-top: 35upx;">2019-09-17</view>
										</view>
										<view class="bottom-right">
											<view>合计</view>
											<view style="margin-top: 35upx;">￥68</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</scroll-view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				pages: 0, //分页总数
				orderList: [],
				currentPage: 0, //分页参数当前页面 
				status: '',
				menuTabs: [{
						name: '全部',
						status: ''
					},
					{
						name: '代付款',
						status: '1'
					},
					{
						name: '待收货',
						status: '2'
					},
					{
						name: '待评价',
						status: '3'
					},
					{
						name: '已完成',
						status: '4'
					},
					{
						name: '已取消',
						status: '5'
					}
				],
				swiperDateList: [
					[],
					[],
					[],
					[],
					[],
					[]
				]
			};
		},
		onLoad: function() {
			//初始化数据
			for (var i = 0; i < this.swiperDateList.length; i++) {
				this.getDateList(i);
			}
			if (!uni.getStorageSync('userInfo')) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
		onShow() {
			this.getStoreList()
		},
		methods: {
			swichMenu: async function(current) {
				//点击其中一个 menu
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.currentPage = '0';
					this.orderList = [];
					this.setScrollLeft(current);
				}
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
				this.currentPage = '0';
				this.orderList = [];
				this.getStoreList()
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? leftWidthSum - winWidth : 0;
			},
			getWidth: function(id) {
				//得到元素的宽高
				return new Promise((res, rej) => {
					uni
						.createSelectorQuery()
						.select('#' + id)
						.fields({
								size: true,
								scrollOffset: true
							},
							data => {
								res(data);
							}
						)
						.exec();
				});
			},
			// 翻页
			loadMore: function(tabIndex) {
				console.log('正在加载更多数据。。。');
				this.getDateList(tabIndex)
				const curpage = (this.currentPage - 0) + 1;
				if (curpage <= this.pages) {
					uni.showLoading({
						title: '正在加载...'
					})
					this.currentPage = curpage;
					this.getStoreList(curpage)
				} else {
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					})
				}

			},
			getDateList: function(tabIndex) {
				for (var i = 0; i < 20; i++) {
					var entity = this.menuTabs[tabIndex].name + this.swiperDateList[tabIndex].length;
					this.swiperDateList[tabIndex].push(entity);
				}
			},
			// http请求
			getStoreList(pageNo = '0') {
				// if(this.currentTab==0){
				// 	this.status=''
				// }
				// if(this.currentTab==1){
				// 	this.status=0
				// }
				// if(this.currentTab==2){
				// 	this.status=1
				// }
				// if(this.currentTab==3){
				// 	this.status=2
				// }
				// if(this.currentTab==4){
				// 	this.status=3
				// }
				// if(this.currentTab==5){
				// 	this.status=4
				// }
				switch (this.currentTab) {
					case 0:
						this.status = ''
						break;
					case 1:
						this.status = 0
						break;
					case 2:
						this.status = 1
						break;
					case 3:
						this.status = 2
						break;
					case 4:
						this.status = 3
						break;
					case 5:
						this.status = 4
						break;
				}
				uni.showLoading({
					title: '正在加载...'
				})
				let userInfo = uni.getStorageSync('userInfo')
				this.$http.post('assemble/businessOrder/selectBusinessGroupOrders', {
					pageNo,
					orderType: '1',
					storeId: userInfo.storeId,
					status: this.status
				}).then((res) => {
					if (res.data.obj) {
						uni.hideLoading()
						this.orderList = this.orderList.concat(res.data.obj.list);
						this.pages = res.data.obj.totalPages - 1;
					} else {

						this.orderList = []
						uni.showToast({
							title: '无数据',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading()
					}
					console.log(this.orderList)
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		background: rgba(249, 249, 249, 1);
	}

	.body-view {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		width: 100%;
		align-items: flex-start;
		justify-content: center;
	}

	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		background-color: #ffffff;
		/* 在这里设置导航条高度 */
		height: 100upx;
	}

	.top-menu-view .menu-one-view {
		display: inline-block;
		white-space: nowrap;
		height: 100%;
		flex: 1;
	}

	.top-menu-view .menu-one-view .menu-one {
		/* 在这里写 单个按钮样式 */
		margin-left: 15upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		width: 77upx;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-txt {
		height: 40upx;
		font-weight: 400;
		color: rgba(154, 154, 154, 1);
		line-height: 40upx;
		font-size: 30upx;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
	}

	.top-menu-view .menu-one-view .menu-one-act {
		/* 在这里写 单个按钮样式 */
		margin-left: 25upx;
		margin-right: 25upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: #333333;
		font-weight: 600;
		line-height: 40upx;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 6upx;
		background: $global-bgc;
	}

	.swiper-box-list {
		flex: 1;
		width: 100%;
		height: auto;
		background-color: #EEEEEE;
	}


	.swiper-one-list {
		height: 100%;
		width: 100%;
	}

	.swiper-one-list .swiper-list-entity {
		width: 690upx;
		height: 463upx;
		margin-top: 34upx;
		background-color: #ffffff;
		border-radius: 10px;

		.swiper-box-top {
			height: 92upx;
			line-height: 92upx;
			font-size: 28upx;
			color: #666666;
			border-bottom: 1upx solid #eeeeee;

			text:nth-child(1) {
				margin-left: 22upx;
				margin-right: 22upx;
			}

		}

		.swiper-box-center {
			height: 210upx;
			border-bottom: 1upx solid #eeeeee;

			.swiper-box-img {
				width: 132upx;
				height: 132upx;
				border-radius: 10upx;
				margin-left: 21upx;
			}

			.swiper-box-center-text {
				margin-left: 40upx;
				font-size: 28upx;

				.swiper-box-center-name {
					margin-top: 36upx;
					font-size: 26upx;
					color: #999999;
				}
			}
		}

		.swiper-box-bottom {
			margin-top: 24upx;
			font-size: 28upx;
			color: #888888;
			text-align: center;

			.bottom-left {
				width: 204upx;

				.bottom-left-pj {
					font-size: 28upx;
					color: #fe7420;
					margin-top: 35upx;
				}
			}

			.bottom-center {
				width: 274upx;
				border-left: 1upx solid #eeeeee;
				border-right: 1upx solid #eeeeee;
			}

			.bottom-right {
				text-align: center;
				width: 204upx;

			}
		}
	}
</style>
